<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<x-alert type="danger" :show="info.state === 0">
				请在{{ info.expire_time }}前完成支付，超时自动取消
			</x-alert>
			<view class="p-4 rounded-4 bg-white flex flex-center grid-gap-2" v-if="info.address_id">
				<image src="@/static/icons/location.png" mode="" style="width: 25px;height: 25px;"></image>
				<view class="flex-1 flex flex-column grid-gap-2">
					<view class="flex grid-gap-2">
						<text class="font-weight-600" hover-class="bg" selectable user-select>{{ info.name }}</text>
						<text class="text-grey" hover-class="bg" selectable user-select>{{ info.mobile }}</text>
					</view>
					<text hover-class="bg" selectable user-select>
						<text class="h9 text-placeholder mr-1">{{ info.province }}</text>
						<text class="h9 text-placeholder mr-1">{{ info.city }}</text>
						<text class="h9 text-placeholder mr-1">{{ info.area }}</text>
						<text class="h9 text-placeholder mr-1" v-if="info.street">{{ info.street }}</text>
						<text class="h9 text-placeholder">{{ info.address_detail }}</text>
					</text>
				</view>
			</view>

			<!-- 预约项目 -->
			<view class="p-4 rounded-4 bg-white flex flex-column grid-gap-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h9 font-weight-600">预约项目</text>
				</view>
				<view class="flex flex-column grid-gap-1 bg">
					<view class="bg-white py-2" v-for="(project, index) in info.projects" :key="index">
						<x-project-item :project="project">
							<template #action>
								<view @tap.stop class="flex flex-center grid-gap-1">
									<text class="text-placeholder">x</text>
									<text class="font-weight-600 text-grey" v-if="project.num > 0">{{ project.num
										}}</text>
								</view>
							</template>
						</x-project-item>
					</view>

				</view>
			</view>

			<!-- 订单明细 -->
			<view class="p-4 rounded-4 bg-white flex flex-column grid-gap-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h9 font-weight-600">订单明细</text>
				</view>
				<view class="flex flex-y-center flex-x-space-between">
					<text class="text-grey h9">项目金额</text>
					<x-money type="danger-light-3" weight="bold" size="8" :money="info.basic_price">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
				<view class="flex flex-y-center flex-x-space-between">
					<text class="text-grey h9">延长金额</text>
					<x-money type="danger-light-3" weight="bold" size="8" :money="info.overtime_price">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
				<view class="flex flex-y-center flex-x-space-between" v-if="info.travel_price">
					<text class="text-grey h9">出行费用</text>
					<x-money type="danger-light-3" weight="bold" size="8" :money="info.travel_price">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
				<view class="flex flex-y-center flex-x-space-between" v-if="info.travel_name">
					<text class="text-grey h9">车费详情</text>
					<view class="flex flex-center grid-gap-1">
						<text class="h10 text-dark font-weight-600">{{ info.travel_name }}</text>
						<text class="h10 text-dark-light-3">全程{{ info.distance_text }}</text>
					</view>
				</view>
				<view class="flex flex-y-center flex-x-space-between" v-if="info.travel_name">
					<text class="text-grey h9">支付方式</text>
					<view class="flex flex-center grid-gap-1" v-if="info.pay_type === 'money'">
						<image src="@/static/icons/pay/balance.png" mode="scaleToFill"
							style="width: 20px;height: 20px;" />
						<text class="h10">余额支付</text>
					</view>
					<view class="flex flex-center grid-gap-1" v-else-if="info.pay_type === 'wxpay'">
						<image src="@/static/icons/pay/wxpay.png" mode="scaleToFill"
							style="width: 20px;height: 20px;" />
						<text class="h10">微信支付</text>
					</view>
					<view class="flex flex-center grid-gap-1" v-else-if="info.pay_type === 'alipay'">
						<image src="@/static/icons/pay/alipay.png" mode="scaleToFill"
							style="width: 20px;height: 20px;" />
						<text class="h10">支付宝</text>
					</view>
					<view class="flex flex-center grid-gap-1" v-else-if="info.pay_type === 'epay'">
						<image src="@/static/icons/pay/epay.png" mode="scaleToFill" style="width: 20px;height: 20px;" />
						<text class="h10">易支付</text>
					</view>
				</view>
				<view class="flex flex-y-center flex-x-space-between" v-if="info.coupon_money > 0">
					<text class="text-grey h9">优惠金额</text>
					<x-money type="danger-light-3" weight="bold" size="8" :money="info.coupon_money">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
				<view class="flex flex-y-center flex-x-space-between">
					<text class="text-grey h9">支付金额</text>
					<x-money type="danger-light-3" weight="bold" size="8" :money="info.price">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
			</view>

			<!-- 订单详情 -->
			<view class="p-4 rounded-4 bg-white flex flex-column grid-gap-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h9 font-weight-600">订单信息</text>
				</view>

				<view class="flex flex-y-center flex-x-space-between">
					<text class="h9 text-grey">{{ WebConfigStore.replaceIndustryPersonnelName('服务技师') }}</text>
					<view class="flex flex-center grid-gap-1">
						<image :src="info.technician_headimg" mode="scaleToFill" class="rounded-circle"
							style="width: 20px;height: 20px;" />
						<text class="h10">{{ info.technician_nickname }}</text>
					</view>
				</view>
				<view v-if="info.to_shop" class="flex flex-column grid-gap-4">
					<view class="flex flex-y-center flex-x-space-between">
						<text class="text-grey h9">服务门店</text>
						<text class="h10 text-dark font-weight-600"
						@tap="$page.open('/pages/mch/details?id=' + info.shop_id)">{{ info.shop_title
							}}</text>
					</view>
					<view class="flex flex-y-center">
						<text class="text-grey h9">门店地址</text>
						<view class="flex-1 flex flex-x-flex-end flex-y-center" @tap="openLocation">
							<text class="h10 text-dark font-weight-600">
								{{ info.shop_province }}
								{{ info.shop_city }}
								{{ info.shop_area }}
								{{ info.shop_street }}
								{{ info.shop_address }}
							</text>
							<image src="/static/icons/map-icon.png" mode="aspectFit" class="x-navbar-icons-image"
								style="width: 20px; height: 20px;" v-if="info.shop_longitude && info.shop_latitude" />
						</view>
					</view>
				</view>
				<view class="flex flex-y-center flex-x-space-between">
					<text class="text-grey h9">订单编号</text>
					<text class="h10 text-dark font-weight-600" hover-class="bg" selectable user-select>{{ info.trade
						}}</text>
				</view>
				<view class="flex flex-y-center flex-x-space-between">
					<text class="text-grey h9">预约时间</text>
					<text class="h10 text-dark font-weight-600" hover-class="bg" selectable user-select>{{
						info.start_time }}</text>
				</view>
				<view class="flex flex-y-center flex-x-space-between">
					<text class="text-grey h9">订单备注</text>
					<text class="h10 text-dark font-weight-600">{{ info.remark }}</text>
				</view>
			</view>
		</view>

		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { $api, $page } from "@/utils";
import { onLoad } from '@dcloudio/uni-app';
import { useWebConfigStore } from "@/stores";
const WebConfigStore = useWebConfigStore();
const loading = ref(false);
const info = ref({});
const getOrderInfo = (trade: string) => {
	loading.value = true;
	$api.Orders.info(trade).then((data: any) => {
		info.value = data;
	}).catch((err: any) => {
		uni.showModal({
			title: '提示',
			content: err.msg,
			showCancel: false,
			success: () => {
				$page.back();
			}
		})
	}).finally(() => {
		loading.value = false;
	})
}
const openLocation = () => {
	if (!info.value.shop_longitude || !info.value.shop_latitude) {
		return;
	}
	uni.openLocation({
		latitude: info.value.shop_latitude,
		longitude: info.value.shop_longitude,
		name: info.value.shop_title,
		address: `${info.value.shop_province}${info.value.shop_city}${info.value.shop_area}${info.value.shop_street}${info.value.shop_address}`
	});
}
onLoad((options: any) => {
	getOrderInfo(options.trade)
})
</script>

<style lang="scss" scoped></style>
